import React, { useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Alert } from 'antd';
import FileHeader from './components/FileHeader';
import FileList from './components/FileList';
import Footer from '@/components/Footer';
import { InboxOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import { message, Upload } from 'antd';
import { connect } from 'umi';
import setleIndex from '@/pages/index.less';
import './index.less'

function IndexPage(props: any) {
  const { filelist, dispatch } = props;
  const [userrole, setUserrole] = useState({
    role: ''
  })
  useEffect(() => {
    const defaultuserrole: any = localStorage.getItem('user')
    const userrole = JSON.parse(defaultuserrole)
    setUserrole(userrole)
  }, [])

  const [pageInfo] = useState({ page: 1, pageSize: 12 });

  const { Dragger } = Upload;

const fileprops: UploadProps = {
  name: 'file',
  multiple: true,
  action: '/api/file/upload?unique=0',
  defaultFileList:filelist,
  onChange(info) {
    const { status } = info.file;
    if (status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (status === 'done') {
      message.success(`${info.file.name} 文件上传成功`);
      filelist.unshift(info.file)
      dispatch({ type: 'file/INIT', pageInfo });
    } else if (status === 'error') {
      message.error(`${info.file.name} 文件上传失败`);
    }
  },
  onDrop(e) {
    console.log('Dropped files', e.dataTransfer.files);
  },
};

  return (
    <div>
      <header>
        <PageHeaderWrapper fixedHeader={true} />
      </header>
      <main className={setleIndex.p20}>
        {
          userrole.role === 'admin' ? <Dragger {...fileprops}>
            <p className="ant-upload-drag-icon">
              <InboxOutlined />
            </p>
            <p className="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
            <p className="ant-upload-hint">
            文件将上传到 OSS, 如未配置请先配置
            </p>
          </Dragger> : <Alert
            message={
              <>
                系统检测到<b>阿里云OSS配置</b>未完善，
                <a
                  style={{
                    color: '#000',
                  }}
                  href="/setting"
                >
                  点我立即完善
                </a>
              </>
            }
            type="warning"
          />
        }
        <FileHeader />
        <FileList />
      </main>
      <footer>
        <Footer />
      </footer>
    </div>
  );
}

// connect接收两个参数
// 1. 函数 mapStateToProps
const mapStateToProps = (state: any) => {
  const { file } = state;
  return file;
};
export default connect(mapStateToProps)(IndexPage);